El siguiente ejemplo crea un encabezado, un lienzo y un pie de página. Se le dice al lienzo que llene el espacio entre el encabezado y el pie de página. Sucede lo siguiente:
¿Por qué el lienzo no se encoge y cómo puedo hacer que se encoja?
const canvas = document.getElementById("canvas"); function paint() { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; const ctx = canvas.getContext("2d"); ctx.fillText(canvas.height, canvas.width / 2, canvas.height / 2); } paint(); new ResizeObserver(paint).observe(canvas); .main { height: 100%; display: flex; flex-flow: column; } .canvas { flex: 1 0 0%; } html, body { height: 100%; margin: 0; } <div class="main"> <div class="header"> Header </div> <canvas id="canvas" class="canvas"></canvas> <div class="footer"> Footer </div> </div>Establecer la altura del canvas en 0 y flex-grow en 1 parece lograr lo que desea.
const canvas = document.getElementById("canvas"); function paint() { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; const ctx = canvas.getContext("2d"); ctx.fillText(canvas.height, canvas.width / 2, canvas.height / 2); } paint(); new ResizeObserver(paint).observe(canvas); .main { display: flex; flex-direction: column; height: 100%; } canvas { height: 0; flex-grow: 1; } html, body { height: 100%; margin: 0; } <div class="main"> <div class="header"> Header </div> <canvas id="canvas" class="canvas"></canvas> <div class="footer"> Footer </div> </div>